<template>
  <div class="member">
    <div class="member-top" @click="showAllMember=!showAllMember">
        <div class="member-item" v-for="(member, i) in members" :key="i">
          <i v-if="member.userName===group.operUser" class="iconfont icon-huangguan"></i>
          <img class="img" :style="!member.isOnline?'filter: grayscale(100%);':''" :src="`${$url}/${member.avatar}`" alt="" @click="handOpenChat(member)">
          <span>{{member.remarkName || member.groupNickName}}</span>
        </div>
    </div>
    <div class="member-mid">
      <mt-cell v-if="group.operUser===user.userName" title="群名称" :to="`/editName/2`" is-link :value="group.groupName"></mt-cell>
      <mt-cell v-else title="群名称" :value="group.groupName"></mt-cell>
      <mt-cell v-if="group.operUser===user.userName" title="群公告" :to="`/groupNotice/${group.id}`" is-link value=""></mt-cell>
      <mt-cell v-else title="群公告" value=""></mt-cell>
      <mt-cell title="群昵称" :to="`/editName/1`" is-link :value="groupUser.groupNickName"></mt-cell>
      <mt-cell title="查找聊天内容" to="/groupHistory" is-link value=""></mt-cell>
    </div>
    <!-- <div class="member-footer">
      <div class="my-border name">清空聊天记录</div>
      <div class="my-border name">删除并退出</div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'Member',
  data () {
    const user = localStorage.getItem('user')
    const chatItem = localStorage.getItem('groupChatItem')
    return {
      showAllMember: false,
      // listTopTen: [],
      user: (user && JSON.parse(user)) || null,
      chatItem: (chatItem && JSON.parse(chatItem)) || {},
      members: [],
      groupUser: {},
      onlineUsers: [],
      group: {}
    }
  },
  mounted () {
    if (this.user === null) {
      this.$router.push('/login')
    }
    let cacheList = localStorage.getItem('memberList')
    this.members = (cacheList && JSON.parse(cacheList)) || []
    let cacheOnlineUsers = localStorage.getItem('onlineList')
    this.onlineUsers = (cacheOnlineUsers && JSON.parse(cacheOnlineUsers)) || []
    this.$socket.getGroupMembers(this.chatItem.chatId, this.user.id, (res) => {
      this.members = res.members
      // this.listTopTen = res.members.slice(0, 10)
      this.groupUser = res.groupUser // 带群昵称
      this.group = res.group // 带群名称
      // groupName groupNickName groupId == id
      let groupInfo = {
        groupName: this.group.groupName,
        groupNickName: this.groupUser.groupNickName,
        id: this.group.id
      }
      localStorage.setItem('groupInfo', JSON.stringify(groupInfo))
      this.onlineUsers = res.onlineUsers
      this.checkIsOnline(this.onlineUsers, this.members)
      localStorage.setItem('memberList', JSON.stringify(this.members))
      localStorage.setItem('onlineList', JSON.stringify(this.onlineUsers))
    })
  },
  methods: {
    // getList () {
    //   return this.showAllMember ? this.members : this.listTopTen
    // },
    checkIsOnline (target, origin) {
      if (!target.length) {
        return false
      }
      for (let i = 0; i < target.length; i++) {
        for (let k = 0; k < origin.length; k++) {
          if (target[i] && (target[i].userId === origin[k].chatId)) {
            origin[k].isOnline = true
            target[i] = ''
          }
        }
      }
    },
    handOpenChat (member) {
      // 管理言 及 群主才可以 发起私聊
      if (this.groupUser.groupMaster || this.group.operUser === this.user.userName) {
        if (member.id !== this.user.id) {
          this.$router.push('/friendChat')
          localStorage.setItem('friendChatItem', JSON.stringify(member))
        }
      }
    }
  }
}
</script>
<style lang="less">
  .member {
    .member-mid {
      margin-top: 10px;
    }
    .member-footer {
      margin-top: 20px;
      background: #fff;
      .name {
        height: 70px;
        color: #FF6464;
        font-size: 15px;
        text-align: center;
        line-height: 70px;
      }
    }
    .icon-ico {
      font-size: 20px;
    }
    .member-top {
      height: 180px;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 14px;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      .add-box {
        border: 1px dashed #D8D8D8;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          color: #D8D8D8;
          font-size: 20px;
        }
      }
      .member-item {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        padding-top: 14px;
        position: relative;
        .icon-huangguan {
          color: yellow;
          position: absolute;
          top: 12px;
          right: 0;
          left: 0;
          margin: 0 auto;
          z-index: 2;
        }
        span {
          font-size: 12px;
          color: #748EAC;
          margin-top: 5px;
        }
        .img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
    }
  }
</style>
